Working with Measure Names and Measure Values

Measure Names and Measure Values are special columns that enable you to create dynamic, multi-measure visualizations.

What are Measure Names and Measure Values?

Measure Names (MN) and Measure Values (MV) are virtual columns that transform your data structure:

• Measure Names: A dimension column containing the names of all measures in your query
• Measure Values: A measure column containing the actual values of those measures

How They Work

Consider a dataset with these columns:

• Ship Mode (dimension)
• Total Revenue (measure)
• Total Discount (measure)
• Total Quantity (measure)

When you enable Measure Values, your data transforms from:

Ship Mode	Total Revenue	Total Discount	Total Quantity
Air	50,000	5,000	1,200
Ground	75,000	7,500	2,000

To a structure like:

Ship Mode	Measure names	Measure values
Air	Total Revenue	50,000
Air	Total Discount	5,000
Air	Total Quantity	1,200
Ground	Total Revenue	75,000
Ground	Total Discount	7,500
Ground	Total Quantity	2,000

Enabling Measure Values

To use Measure Names and Measure Values, enable them when retrieving data:

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery({
  measureValues: {
    enabled: true,
  },
});

Once enabled, two additional columns become available:

• "Measure names"
• "Measure values"

Basic Usage

Creating a Simple Text Table

Display measure values as text in a table layout:

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 * "Total Quantity"
 * "Measure names" // If 'measureValues' is enabled.
 * "Measure values" // If 'measureValues' is enabled.
 */

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery({
  measureValues: {
    enabled: true,
  },
});

muze
  .canvas()
  .rows(["Ship Mode"])
  .columns(["Measure names"])
  .layers([
    {
      mark: "text",
      encoding: {
        text: "Measure values",
      },
    },
  ])
  .data(data)
  .mount("#chart");

Formatting Measure Values

Since Measure Values combines different measures (revenue, quantity, percentages), you often need to format them appropriately.

Using NumberFormatter

Apply formatting to measure values displayed in text layers:

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 * "Total Quantity"
 * "Measure names"
 * "Measure values"
 */

const {
  muze,
  getDataFromSearchQuery,
  formatters: { NumberFormatter },
} = viz;

const data = getDataFromSearchQuery({
  measureValues: {
    enabled: true,
  },
});

// Create a formatter for currency values
const currencyFormatter = new NumberFormatter("currency", {
  currency: "USD",
  unit: "auto",
  decimalDigits: 2,
});

muze
  .canvas()
  .rows(["Ship Mode"])
  .columns(["Measure names"])
  .layers([
    {
      mark: "text",
      encoding: {
        text: {
          field: "Measure values",
          formatter: currencyFormatter.formatterFunc(),
        },
      },
    },
  ])
  .data(data)
  .mount("#chart");

Different Formatters per Measure

For mixed measure types, use splitby formatting:

/**
 * Available Columns:
 * "Day of Week(Order Date)"
 * "Category"
 * "Ship Mode"
 * "Type"
 * "Total Discount"
 * "Total Revenue"
 * "Total Quantity"
 * "Measure names" // If 'measureValues' is enabled.
 * "Measure values" // If 'measureValues' is enabled.
 */

const {
  muze,
  getDataFromSearchQuery,
  formatters: { NumberFormatter, SplitByFormatter },
} = viz;

const data = getDataFromSearchQuery({
  measureValues: {
    enabled: true,
  },
});

// Create individual formatters for each measure
const mnFormatter = new SplitByFormatter({
  splitByField: "Measure names",
  values: {
    "Total Discount": new NumberFormatter("percent"),
    "Total Quantity": new NumberFormatter("decimal"),
    "Total Revenue": new NumberFormatter("currency", { currency: "INR" }),
  },
});

muze
  .canvas()
  .rows(["Ship Mode"])
  .columns([["Measure names"], []])
  .layers([
    {
      mark: "text",
      encoding: {
        text: {
          field: "Measure values",
          formatter: mnFormatter.formatterFunc(),
        },
      },
    },
  ])
  .data(data)
  .mount("#chart");

Formatting in Tooltips

Apply formatting to measure values in tooltips:

/**
 * Available Columns:
 * "Ship Mode"
 * "Total Discount"
 * "Total Quantity"
 * "Measure names" // If 'measureValues' is enabled.
 * "Measure values" // If 'measureValues' is enabled.
 * --- END ---
 */

const {
  muze,
  getDataFromSearchQuery,
  formatters: { NumberFormatter },
} = viz;

const data = getDataFromSearchQuery({
  measureValues: {
    enabled: true,
  },
});

const formatter = new NumberFormatter("currency", {
  currency: "USD",
  unit: "auto",
  decimalDigits: 2,
});

muze
  .canvas()
  .rows(["Measure values"])
  .columns(["Measure names"])
  .layers([
    {
      mark: "text",
      encoding: {
        text: {
          field: "Measure values",
        },
      },
    },
  ])
  .config({
    interaction: {
      tooltip: {
        fieldFormatters: {
          "Measure values": formatter.formatterFunc(),
        },
      },
    },
  })
  .data(data)
  .mount("#chart");